<script setup>
import {pinyin, html} from "pinyin-pro";
import {computed, ref} from 'vue'

defineOptions({
  name: "Pinyin"
});

// 生成一大段随机文本

const content = ref(' 床前明月光，疑是地上霜。举头望明月，低头思故乡。')
const py = computed(() => {
  return pinyin(content.value, {type: "array"})
})
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <p class="font-medium">汉语拼音</p>
      </div>
    </template>
    <ruby v-for="(text, index) in content.split('')" style="margin-right: 10px">
      <span class="py-chinese-item">{{ text }}</span>
      <rp>(</rp>
      <rt class="py-pinyin-item">{{ py[index] }}</rt>
      <rp>)</rp>
    </ruby>
    <!--    <ruby>-->
    <!--      {{ text }}-->
    <!--      <rt>-->
    <!--        {{ py[index] }}-->
    <!--      </rt>-->
    <!--    </ruby>-->

  </el-card>
</template>

<style lang="scss" scoped>
.custom {
  /* 汉字的样式 */
  :deep(.py-chinese-item) {
    color: #409eff;
  }

  /* 拼音的样式 */
  :deep(.py-pinyin-item) {
    color: #f56c6c;
  }
}
</style>